<template>
	<view class="indexuser conbox designs">
     <!-- <span
      v-if="$_isShow(owner_user_id)"
      class="renovation"
      @click="editall"
      @click.stop>装修店铺</span> -->
		<!-- <text class="renovation">装修店铺</text> -->
		<!-- <van-list v-model="loadings" :finished="hasfinished"  @load="getlond" finished-text="没有更多了">-->
		<view class="design_card">
			<view class="card_top">

				<view class="personal">
					<view class="desiname">{{ username }}</view>
					<view class="perdetail" v-if="address && rolename">
						<text class="limitaddress">{{ address }}</text>
						<text class="separate_line">|</text>
						<text>{{ rolename }}</text>
					</view>
				</view>
				<view class="perso_img">
					<image :src="`${userimg}?x-oss-process=image/resize,m_fill,h_210,w_210`"></image>
				</view>
			</view>
			<view class="card_bottom">
				<view class="link_way">
					<view><text class="label" v-if="wechat">微信</text><text class="limitaddress">{{wechat}}</text></view>
					<view><text class="label" v-if="phone">手机</text><text class="limitaddress">{{phone}}</text></view>
					<view><text class="label" v-if="descaddress">地址</text><text class="limitaddress">{{descaddress}}</text></view>
				</view>
					<getPhoneNumber dataSource="保存名片">
						<div class="savecard" @cbFn="showCardMask"><text>保存名片</text></div>
					</getPhoneNumber>

			</view>
		<!-- </view>
		<view class="personal_wrap">
			<view class="personal_tit">特色服务</view>
			<view class="personal_body">
				<view class="user_list">
		<image
		v-for="(item,index) in fans.data"
		:src="item.user_picture"
		alt
		class="imgs"
		v-if="index<6"
		:Key="index"></image>
					<image :src="`${constant.imgUrl}design/more.png`"></image>
				</view>
				<view class="browse_num">
					<text class="fans_num">{{fans.total}}</text>
					<text class="text_sub_com">粉丝</text>
					<em class="popularity_num">人气</em> 
				</view>-->
			</view>
		<!-- 报价 -start -->
		<special-service></special-service>
		<!-- 报价 -end -->
		<!-- :class="{pt94: tabFixed}" -->
		<!-- :class="{fixed: tabFixed}" -->
		<view class="nav_content">
			<view class="tab" ref="tab">
        <view class="item" v-if="technology">
		<text>施工工艺</text>
        </view>
				<view class="item" :class="{on: index === tabIndex}" v-for="(item,index) in tabTxt"
					:key="item" @click="switchTab(index)">
					<text>{{ item }}</text>
				</view>
				<!-- <view v-else class="item" :class="{on: index === tabIndex}" v-for="(item,index) in tabTxt2"
					:key="item" @click="switchTab(index)">
					<text>{{ item }}</text>
				</view> -->
			</view>

      <!-- <constech v-if="technology && tabIndex === 0"/> -->

			<!-- <article-list :ref="fistmoduarticle ? 'modulearticle':'secondarticle'" v-show="(fistmoduarticle || articlestatus) && tabIndex === 0"></article-list> -->
  	<case-list ref="modulecase" v-if="tabIndex == 0" :ownerUserId="owner_user_id" :shareUserId="option.share_user_id" @stopRefresh="stopRefresh"></case-list>

			<article-list :ownerUserId="owner_user_id" ref="secondarticle" v-if="tabIndex == 1" @stopRefresh="stopRefresh"></article-list>
      	<!-- <case-list ref="modulecase" v-show="casestatus && tabIndex === 1"></case-list> -->

			<designer-data v-if="tabIndex == 2"></designer-data>

			<alliance :ownerUserId="owner_user_id" ref="alliance" v-if="tabIndex == 3" @stopRefresh="stopRefresh"></alliance>

		</view>
		<footer>
			<normal-footer :isShowAttr="true" ref="normalFooter"></normal-footer>
			</footer>
		<share-poster ref="sharePoster" :type="5" :ownerUserId="owner_user_id"></share-poster>
		<v-mapNav ref="mapNav"></v-mapNav>
		<get-phone-pup ref="getPhonePup" :userInfo="userInfo" />
		<!-- <guide v-if="$_isShow(owner_user_id)" :user-info="userInfo"></guide> -->
	</view>
</template>

<script>

import specialService from '@/pages/components/specialService'
import caseList from '@/pages/components/caseList'
import articleList from '@/pages/components/articleList'
import designerData from '@/pages/components/designerData'
import alliance from '@/pages/components/alliance'
// import guide from '@/pages/components/guide'
import sharePoster from '@/pages/components/sharePoster'
// import constech from './components/constechnogy'
import normalFooter from '@/pages/components/normalFooter'
import { getBasicUser, getRoleReal } from '@/utils/auth'
import { apiBehavior } from '@/api'
import { mapGetters } from 'vuex'
import getPhoneNumber from '@/pages/components/getPhoneNumber'
import MapNav from '@/pages/components/mapNav'
import getPhonePup from '@/pages/components/getPhonePup'
// import { Promise } from 'q'

export default {
	name: 'DesignerIndex',
	components: {
		specialService,
		caseList,
		articleList,
		// guide,
		sharePoster,
		designerData,
		alliance,
		// constech,
		normalFooter,
		getPhoneNumber,
		'v-mapNav': MapNav,
		getPhonePup
	},
	data() {
		return {
			tabIndex: 0,
			tabFixed: false,
			tabOffsetHeight: '',
			constant: this.$constant,
			option: {},
			owner_user_id: '',
			technology: false,
			cityid: '',
			role: '',
			active: 0,
			hidefans: false,
			showcard: false,
			title: '分享', // 传到底部子组件的值
			userprivi: false, // 不同用户保存名片按钮状态展示
			tchange: true,
			centerimg: true, // 底部两种不同按钮状态的控制
			weixinshow: true, // 转发数和加好友切换
			stylechoice: true, // 下拉风格点击按钮的状态
			searchBarFixed: 'absolute',
			userimg: '',
			wechat: '',
			phone: '',
			username: '',
			address: '',
			rolename: '',
			userid: '',
			second: true,
			isactive: -1,
			descaddress: '',
			teamList: [],
			teamList_total: '',
			teampage: 0,
			showadd: false,
			headstatus: true,
			fans: 0,
			casestatus: true,
			articlestatus: true,
			fistmoduarticle: false
		}
	},
	onLoad(option) {
		const { owner_user_id, role, cityid, active, share_user_id } = option
		this.option = option
		this.owner_user_id = owner_user_id
		if (!option.p_share_user_id) {
			this.option.p_share_user_id = ''
		}
		this.active = active
		this.cityid = cityid
		this.role = role
		this.init().then(() => {
			uni.setNavigationBarTitle({
				title: this.userInfo.nick_name
			})
			this.getbase()
			this.$refs.mapNav.init(this.userInfo)
			this.$refs.getPhonePup.init()
		})
		setTimeout(() => {
			// this.shareweixin()
			// this.sendtranck()
		}, 2000)
		this.$nextTick(() => {
			this.$refs.modulecase.init()
			// this.$refs.defooters.changstatus = 'share'
			// this.$refs.defooters.tchange = true
			// this.$refs.defooters.centerimg = true
			if (!this.$_isShow(this.owner_user_id)) {
				this.$refs.normalFooter.init()
			}
		})
		// 底部组件传值
		/* shoptypes 用来判断管理中心进入店铺设置的状态
             * */

		// this.$refs.defooters.title = '分享';
		// this.$refs.defooters.showing = true;

		uni.setStorageSync('shoptypes', 'design')
	},
	onPullDownRefresh() {
		this.init().then(() => {
			this.$nextTick(() => {
				switch (this.tabIndex) {
					case 0:
						this.$refs.modulecase.refresh()
						break
					case 1:
						this.$refs.secondarticle.refresh()
						break
					case 3:
						this.$refs.alliance.refresh()
						break
					default:
						this.stopRefresh()
						break
				}
			})
		})
	},
	onReachBottom() {
		this.$nextTick(() => {
			switch (this.tabIndex) {
				case 0:
					this.$refs.modulecase.reachBottom()
					break
				case 1:
					this.$refs.secondarticle.reachBottom()
					break
				case 3:
					this.$refs.alliance.reachBottom()
					break
				default:
					break
			}
		})
	},
	onShareAppMessage: function(options) {
		const shareObj = {
			title: this.userInfo.nick_name + this.userInfo.role_name,
			path: `/pages/design/designCompany/indexNew?owner_user_id=${this.userInfo.user_id}`
		}
		return shareObj
	},
	watch: {
		tabIndex(val) {
			this.$nextTick(() => {
				switch (val) {
					case 0:
						this.$refs.modulecase.init()
						break
					case 1:
						this.$refs.secondarticle.init()
						break
					case 3:
						this.$refs.alliance.init()
						break
					default:
						break
				}
			})
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getBasicUser' }),
		tabTxt() {
			if (this.$_isShow(this.owner_user_id)) {
				return ['获客案例', '获客文章', '资料', '团队']
			}
			return ['案例', '文章', '资料', '团队']
		}
	},
	// onPageScroll(e) {
	// 	const dis = e.scrollTop - this.tabOffsetHeight
	// 	dis > 0 ? this.tabFixed = true : this.tabFixed = false
	// },
	methods: {
		init() {
			// return Promise.all([getRoleReal(), getBasicUser(this.option.owner_user_id)])
			// getRoleReal()
			// getBasicUser(this.option.owner_user_id).then(() => {
			//   this.getbase()
			// })
			return Promise.all([getRoleReal(), getBasicUser(this.option.owner_user_id, true)])
		},
		stopRefresh() {
			uni.stopPullDownRefresh()
		},
		getPhoneNumber(e) {
			console.log(e, '用户信息')
			if (e.type === 'getphonenumber') {
				if (e.mp.detail.errMsg === 'getPhoneNumber:fail user deny' || !e.mp.detail.iv) {
					let queryData = ``
					gotoH5(e.currentTarget.dataset.source, queryData)
				} else {
					let data = {
						sessionKey: this.loginInfo.session_key,
						iv: e.detail.iv,
						encryptData: e.detail.encryptedData
					}
					getUserInfo(data).then(res => {
						this.mobile = res.data.phoneNumber
						this.setAuthorization({ phoneNumber: this.mobile }).then((res) => {
							let queryData = `?mobile=${this.mobile}`
							gotoH5(e.currentTarget.dataset.source, queryData)
						})
					})
				}
			} else if (e.type === 'hasPhoneNumber') {
				let queryData = `?mobile=${this.mobile}`
				gotoH5(e.page, queryData)
			}
		},
		shareweixin() {
			let url = ''
			const imgurl = this.userimg
			const roleid = this.role
			let title = ''
			let desc = ''
			const owner_user_id = this.owner_user_id
			const puser_id = this.option.share_user_id
			const userid = uni.getStorageSync('user_id')
			if (userid == owner_user_id) {
				url = `${location.protocol}//${location.host}/hkds/#/person?owner_user_id=${this.owner_user_id}&` + `share_user_id=${this.owner_user_id}`
			} else {
				url = `${location.protocol}//${location.host}/hkds/#/person?owner_user_id=${this.owner_user_id}&` + `share_user_id=${userid}&` + `p_share_user_id=${this.owner_user_id}`
			}
			if (roleid == 3) {
				title = `${this.username}-设计师名片`
				desc = '收藏我的名片，马上获取免费设计！'
			} else if (roleid == 4) {
				title = `${this.username}名片`
				desc = '收藏我的名片，随时看最新的装修案例！'
			} else if (roleid == 5) {
				title = `${this.username}名片`
				desc = '收藏我的名片，随时看最新的装修案例！'
			} else if (roleid == 6) {
				title = `${this.username}名片`
				desc = '收藏我的名片，随时看最新的装修案例！'
			} else {
				title = this.username
				desc = '收藏我的名片，随时看最新的装修案例！'
			}
			const obj = {
				title, // 分享标题
				desc, // 分享内容
				linkurl: url, // 分享链接
				img: imgurl // 分享内容显示的图片
			}
			this.$wxshare.getJSSDK(url, obj, owner_user_id, puser_id)
		},
		getbase() { // 获取基本资料信息
			const { address, nick_name, user_picture, wechat_number, contact_phone, city_name, role_name, role_id, fans, wechat_qrcode, district_name } = this.userInfo
			this.username = nick_name
			this.userimg = user_picture
			this.wechat = wechat_number
			this.phone = contact_phone
			this.address = city_name
			this.rolename = role_name
			this.role = role_id
			this.fans = fans
			this.descaddress = district_name + address
			this.technology = false
		},
		showCardMask() {
			this.$refs.sharePoster.showMask()
		},
		switchTab(index) {
			this.tabIndex = index
		}
	}
}
</script>

<style lang="scss" scoped>

.savecard {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: #FFD11A;
	width:150px;
	height: 60px;
	border-radius:45px;
	margin-right:-15px;
	text-align: center;
	line-height: 60px;
	/*  #ifdef  MP-WEIXIN  */
	/*  margin-right: 100px;
	/*  #endif  */
	/*  #ifndef  MP-WEIXIN  */
	/*  #endif  */
}

.link_way .limitaddress {
    display: -webkit-box;
    word-break: break-all;
    -webkit-line-clamp: 1;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    overflow: hidden;
    text-overflow: ellipsis;
}

.link_way {
    width: 68%;
    height: auto;
}
.link_way view {
  display: flex;
}
.card_bottom {
    height: auto;
    margin-top: 60px;
    display: flex;
    padding-left: 50px;
}

.card_bottom view {
    line-height: 35px;
    // width: 100%;
}

.card_bottom view .label {
    color: #999999;
    margin-right: 20px;
}

.perso_img {
    width: 140px;
    height: 140px;
    margin-right: 50px;
    margin-top:50px;
    border-radius: 20px;
}

.perso_img image {
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.perdetail {
    color: #666666;
    font-size: 24px;
    display: flex;
    margin-top: 30px;
}

.perdetail .limitaddress {
    display: -webkit-box;
    word-break: break-all;
    -webkit-line-clamp: 1;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
}

.perdetail .em {
    color: #cccccc;
}
.personal {
    height: auto;
    margin-left: 50px;
    width: 60%;
}
.card_top {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
}
.indexuser {
  background-image: url($imgUrl+'design/card_back.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: #fff;
  padding-bottom: 120px;
  .nav_content{
    width: 100%;
    border-top: 20px solid #f5f5f5;
    &.pt94 {
      padding-top: 94px;
    }
    .tab {
      display: flex;
      width: 100%;
      justify-content: space-around;
      background-color: #fff;
      border-bottom: 2px solid #ddd;
      &.fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
      }
      .item {
        flex: 1 1 auto;
        padding: 30px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        &.on text{
          	font-size: 28px;
            color: #333333;
            &::after {
              content: '';
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              bottom: 0;
              width: 60px;
              height: 6px;
              background-color: #ffd11a;
              border-radius: 3px;
            }
        }
        text {
            line-height: 1;
          	font-size: 28px;
            font-stretch: normal;
            color: #999999;
        }
      }
    }
  }
  .personal_wrap {
    // display: flex;
    display: -webkit-box;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 80px);
    height: auto;
    .personal_tit {
      font-size: 28px;
      font-weight: 600;
      margin-top:30px;
      margin-right: 30px;

    }
    .fans_num{
      color: #333;
      font-size: 34px;
      padding: 0 11px 0 22px;
    }
    .personal_body {
      display: flex;
      align-items: center;
      position: relative;
      margin-top:30px;
      .user_list {
        display: flex;
        align-items: center;
        max-width: 300px;
        image {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          position: relative;
        }
      }
    }
  }
}
// .designs .van-pull-refresh{
//      padding-bottom: 0;
//  }
.designs .van-list{
    overflow-y: hidden;
}
</style>

<style scoped>
  body{
    background: none;
  }
  .designs{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .caselist li{
    margin-bottom: 80px;
  }
  .design_card{
    margin-top: 20px;
    width: calc(100% - 80px);
    background-image: url("https://wximg.meijiabang.com/hkds/miniapp/images/design/bg.png");
    background-size: 100% 100%;

    background-repeat: no-repeat;
    background-position: center;
    /* border-radius: 20px; */
    padding-bottom: 49px;
	  box-shadow: 0px 5px 30px 5px
    rgba(194, 194, 194, 0.58) insert;
    background-color: transparent;
  }
  .van-list__error-text, .van-list__finished-text, .van-list__loading-text{
    display: inline;
    width: 100%;
    text-align: center;
  }
  .other{
    margin-left: 0;
    margin-top: 15px;
  }
 .renovation{
   position: fixed;
   right: 3%;
   top: 2%;
   width: 140px;height: 60px;
   text-align: center;line-height: 60px;
   background:black;opacity:0.8;color: white;
   border-radius: 10px;z-index: 99;margin-right: 0;
 }

.business-card {
  float: right;
  margin-right: 0.666667rem;
  margin-top: 0.466667rem;
}
  .desiname {
    line-height: 1;
    margin-top: 50px;
      font-size: 48px;
      font-weight: bold;
      display: -webkit-box;
      word-break: break-all;
      -webkit-line-clamp: 1;
      /*! autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
      overflow: hidden;
      text-overflow: ellipsis;
  }

</style>
